.#{$ns}Field-quickEditBtn {
    color: $QuickEdit-iconColor;
    margin-left: $gap-xs;
    visibility: hidden;
    display: inline-block;
    cursor: pointer;

    &:hover {
        color: $QuickEdit-onHover-iconColor;
    }
}

.#{$ns}Field--quickEditable {
    outline: none;
    position: relative;

    &:focus {
        position: relative;

        &:after {
            content: "";
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            position: absolute;
            pointer-events: none;
            z-index: 1;
            border: $QuickEdit-onFocus-borderWidth dashed
                $QuickEdit-onFocus-borderColor;
        }
    }

    &:hover .#{$ns}Field-quickEditBtn {
        visibility: visible;
    }
}

.#{$ns}QuickEdit-popover {
    min-width: px2rem(320px);
    max-width: px2rem(640px);

    .#{$ns}Panel {
        margin-bottom: 0;
        border: none;
    }
}
